<template>
  <a-dropdown :trigger="['click']" overlay-class-name="theme-menu">
    <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
      <span
        v-for="(color, i) in value.slice(0, 8)"
        :key="`color-${i}`"
        class="theme-color"
        :style="{ backgroundColor: color }"
      >
      </span>
    </a>
    <a-menu slot="overlay" @click="onThemeColorChange">
      <a-menu-item
        v-for="item in options"
        :key="item.label"
        :class="{
          active: item.value.join(',') === value.join(','),
          'theme-menu-item': true,
        }"
      >
        <a href="javascript:;">
          <span
            v-for="(color, i) in item.value.slice(0, 8)"
            :key="`color-${i}`"
            class="theme-color"
            :style="{ backgroundColor: color }"
          >
          </span>
        </a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script lang="ts">
/* eslint-disabled */
import { Vue, Prop, Watch, Component } from 'vue-property-decorator'

@Component
export default class ThemeColorPicker extends Vue {
  @Prop({ default: () => [] }) value!: string[] // 必须，接受form的值
  @Prop({ default: 'small' }) size!: string
  @Prop() options!: Array<{ label: string; type: string; value: string[] }>

  @Watch('value')
  private onValueChange(value: any) {
    console.log(value)
  }

  private get renderOptions() {
    return this.options.filter(
      (option) => option.value.join(',') !== this.value.join(',')
    )
  }

  private onThemeColorChange({ key }: { key: string }) {
    const color = this.options.filter((item) => item.label === key)[0].value
    this.$emit('change', color) // emit change 事件，把改变的value传出去
  }
}
</script>

<style lang="less" scoped>
.theme-menu {
  .theme-menu-item {
    opacity: 0.4;

    a {
      margin: -2px;
      padding: 2px;
    }

    &.active {
      opacity: 1;

      a {
        border: 1px solid #6973ff;
      }
    }
  }

  .theme-color {
    display: inline-block;
    height: 22px;
    vertical-align: top;
    width: 18px;
  }
}

.ant-dropdown-link .theme-color {
  display: inline-block;
  height: 22px;
  vertical-align: middle;
  width: 16px;
}
</style>
